<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie9 no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />
    <title>Accessible jQuery drop down menu</title>
    <meta name="description" content="Accessible jQuery drop down navigation, making your main menu accessible to all using a combination of jQuery and CSS techniques" />
    <meta name="keywords" content="menu, navigation, jquery, accessible, wcag, css" />
    <meta name="DC.Title" content="Accessible jQuery drop down menu" />
    <meta name="DC.Subject" content="navigation" />
    <meta name="DC.Description" content="Accessible jQuery drop down navigation, making your main menu accessible to all using a combination of jQuery and CSS techniques" />
    
    
	<!-- Set the viewport width to device width for mobile -->
	<meta name="viewport" content="width=device-width" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    
	<link rel="stylesheet" type="text/css" media="all" href="css/top-menu.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    
    
    
</head>
<body>
	
        <nav id="top_nav">
            
            <ul id="top_nav_menu">
              <li><a href="#1">Item one</a>
                  <ul>
                    <li><a href="#1.1">Sub Item 1.1 with a really long navigation name</a>
                      <ul>
                        <li><a href="#1.1.1">Sub Item 1.1.1</a>
                            <ul>
                                <li><a href="#1.1.1.1">Sub Item 1.1.1.1</a></li>
                                <li><a href="#1.1.1.2">Sub Item 1.1.1.2</a>
                                    <ul>
                                        <li><a href="#1.1.1.2.1">Sub Item 1.1.1.2.1</a></li>
                                        <li><a href="#1.1.1.2.2">Sub Item 1.1.1.2.2</a></li>
                                        <li><a href="#1.1.1.2.3">Sub Item 1.1.1.2.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#1.1.1.3">Sub Item 1.1.1.3</a></li>
                            </ul>
                        </li>
                        <li><a href="#1.1.2">Sub Item 1.1.2</a></li>
                        <li><a href="#1.1.3">Sub Item 1.1.3</a></li>
                        <li><a href="#1.1.4">Sub Item 1.1.4</a></li>
                      </ul>  
                    </li>
                    <li><a href="#1.2">Sub Item 1.2</a>
                      <ul>
                        <li><a href="#1.2.1">Sub Item 1.2.1</a></li>
                        <li><a href="#1.2.2">Sub Item 1.2.2</a></li>
                        <li><a href="#1.2.3">Sub Item 1.2.3</a></li>
                        <li><a href="#1.2.4">Sub Item 1.2.4</a></li>
                      </ul>    
                    </li>
                    <li><a href="#1.3">Sub Item 1.3</a>
                      <ul>
                        <li><a href="#1.3.1">Sub Item 1.3.1</a></li>
                        <li><a href="#1.3.2">Sub Item 1.3.2</a></li>
                      </ul>   
                    </li>
                  </ul>  
              </li>
              <li><a href="#2">Item two</a>
                  <ul>
                    <li><a href="#2.1">Sub Item 2.1</a></li>
                    <li><a href="#2.2">Sub Item 2.2</a>
                      <ul>
                        <li><a href="#2.2.1">Sub Item 2.2.1</a></li>
                        <li><a href="#2.2.2">Sub Item 2.2.2</a></li>
                      </ul>       
                    </li>
                    <li><a href="#2.3">Sub Item 2.3</a>
                      <ul>
                        <li><a href="#2.3.1">Sub Item 2.3.1</a></li>
                        <li><a href="#2.3.2">Sub Item 2.3.2</a></li>
                      </ul>      
                    </li>
                  </ul>  
              </li>
              <li><a href="#3">Item three</a>
                  <ul>
                    <li><a href="#3.1">Sub Item 3.1</a></li>
                    <li><a href="#3.2">Sub Item 3.2</a></li>
                    <li><a href="#3.3">Sub Item 3.3</a></li>
                  </ul>  
              </li>
            </ul>
            
            <script type="text/javascript">var topLevelUL = "#top_nav_menu";</script>
           	<script type="text/javascript" src="js/top-menu.js"></script>
        
        </nav>


</body>
</html>